<template>
    <div>
        <div>
            <van-sticky>
                <div class="rankUser">
                    <div>我的排名第<span class="rankNumber">5</span>名</div>
                    排行榜每小时更新
                </div>
                <van-row class="Item Item_tab_bg">
                    <van-col :span="4" class="Item_left rankcenter">
                        排名
                    </van-col>
                    <van-col :span="6" class="Item_right rankcenter">名字</van-col>
                    <van-col :span="14" class="Item_right ">等级</van-col>
                </van-row>
            </van-sticky>
        </div>
        <div>
            <div v-for="(item, index) in rankList" :key="index">
                <van-row class="Item Item_row">
                    <van-col :span="4" class="Item_left"
                        :style="{ background: index == 0 ? '#f6c503' : index == 1 ? '#a5c2dc' : index == 2 ? '#e78f45' : '#f5f5f5' }">
                        <img :src="index == 0 ? src1 : index == 1 ? src2 : index == 2 ? src3 : ''"
                            v-if="index == 1 || index == 2 || index == 0">
                        <span v-else>{{ index + 1 }}</span>
                    </van-col>
                    <van-col :span="6" class="Item_right rankcenter rankName">{{ item.name }}</van-col>
                    <van-col :span="14" class="Item_right">
                        <span class="ranklevel"> {{ getLevel(item.num) }}</span>
                        <span style="float:right;color:#666"> {{ getTime(item.time) }} <i
                                style="color:#ea7d0d;font-weight: bold;">达成</i></span>
                    </van-col>
                </van-row>
            </div>
        </div>
        <div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAssetURL, getLevel } from '@/utils/index.ts'
import moment from 'moment'
const rankList = ref<any>([])
const src1 = getAssetURL('top/top1.png')
const src2 = getAssetURL('top/top2.png')
const src3 = getAssetURL('top/top3.png')
let list = [
    { name: "测试1", num: 1, time: 1706597346 },
    { name: "测试2", num: 2, time: 1706597348 },
    { name: "测试3", num: 3, time: 1706597359 },
    { name: "测试4", num: 4, time: 1706597390 },
    { name: "测试1", num: 5, time: 1706597395 },
    { name: "测试1", num: 6, time: 1706597346 },
    { name: "测试2", num: 7, time: 1706597348 },
    { name: "测试3", num: 8, time: 1706597359 },
    { name: "测试4", num: 9, time: 1706597390 },
    { name: "测试1", num: 10, time: 1706597395 },
    { name: "测试1", num: 11, time: 1706597346 },
    { name: "测试2", num: 12, time: 1706597348 },
    { name: "测试3", num: 13, time: 1706597359 },
    { name: "测试4", num: 14, time: 1706597390 },
    { name: "测试1", num: 15, time: 1706597395 },
    { name: "测试1", num: 16, time: 1706597346 },
    { name: "测试2", num: 16, time: 1706597348 },
    { name: "测试3", num: 18, time: 1706597359 },
    { name: "测试4", num: 18, time: 1706597390 },
    { name: "测试4", num: 14, time: 1706597390 },
    { name: "测试1", num: 15, time: 1706597395 },
    { name: "测试1", num: 16, time: 1706597346 },
    { name: "测试2", num: 16, time: 1706597348 },
    { name: "测试3", num: 18, time: 1706597359 },
    { name: "测试4", num: 18, time: 1706597390 },
]
onMounted(() => {
    list.sort(function (a, b) {
        if (a.num == b.num) {
            return a.time - b.time
        }
        return b.num - a.num
    })
    rankList.value = list
})
const getTime = (value: number) => {
    return moment(1000 * value).format('YYYY-MM-DD')
}
</script>
<style  lang="scss"  scoped>
.rankUser {
    text-align: center;
    padding-top: 10px;
    font-size: 12px;
    color: #666;
    background-color: #fff;

    .rankNumber {
        color: #ee0a24
    }
}

.Item {
    height: 40px;
    line-height: 40px;

    .Item_left {
        text-align: center;
        border-bottom: 1px solid #666;

        span {
            color: #1890ff;
            font-weight: bold;
        }
    }

    .Item_right {
        padding: 0 10px;
    }
}

.rankcenter {
    text-align: center;
}

.rankName {
    font-weight: bold;
    color: #1890ff;
}

.ranklevel {
    color: #0fb1ba;
    font-weight: bold;
}

.Item_row {
    background: #f9dede;
    border-bottom: 1px solid #f5f5f5;
}

.Item_tab_bg {
    background: #f5f5f5;
}</style>